<!--
 * @Description: 
 * @Date: 2020-12-07 14:22:30
 * @LastEditors: lother
 * @LastEditTime: 2021-01-11 18:43:50
 * @FilePath: \AccountOpening-H5\src\views\login\login.vue
-->
<template>
<div>
    <ul class="register">
        <li>
            <div @click="showPickerChange" class="codePhone">
                {{form.countryCode?'+':''}}{{form.countryCode}}
            </div>
            <van-field type="tel" v-model="form.mobile" :placeholder="$t('login.login.5636agny0i80')" />
        </li>
        <li v-show="!pachShow">
            <van-field type="tel" v-model="form.captcha" :placeholder="$t('login.login.5636agny1q40')" >
                <template #extra>
                    <div class="codeChange" @click.stop="codeChange">
                        <p v-show="codeShow">
                           {{$t('login.login.5636agny27s0')}}
                        </p>
                        <p v-show="!codeShow">
                            <van-count-down ref="countDown" :time="60000" :auto-start="false" :format="'ss'+$t('login.login.5636agny2qc0')"  @finish="finish"/>
                        </p>
                    </div>
                </template>
            </van-field>
        </li>
         <li v-show="pachShow">
            <van-field :type="psdShow?'password':'text'" v-model="form.password" :placeholder="$t('login.login.5636agny3000')" :right-icon="psdShow?'closed-eye':'eye-o'" @click-right-icon="psdShow= !psdShow"></van-field>
        </li>
    </ul>
    <p class="pactList" @click="pachShowClick" :class="pachShow?'on':''">
        {{!pachShow? $t('login.login.5636bdsoogg0') : $t('login.login.5636bdsopps0') }}
        <span v-show="pachShow" @click.stop="forgetClick">{{$t('login.login.5636agny3940')}}</span>
    </p>
    <van-button type="info" block @click="submit">{{$t('login.login.56rwfblbs8g0')}}</van-button>
    <p class="typeShow">{{$t('login.login.5636agny3ts0')}}<span @click="typeChange">{{$t('login.login.5636agny42o0')}}</span></p>
    <p class="typeShow">Based on LinkAOS  <a href="http://linksoft.cn/" target="_blank">©LINKSOFT</a></p>
    <van-popup v-model="showPicker" round position="bottom">
        <van-search :placeholder="$t('login.register.56dgxajeiws0')" v-model="searchCode" @input="searchInput" />
        <van-picker show-toolbar :columns="cities" :value-key="lang" :default-index="index"
            @cancel="showPicker = false" @confirm="onConfirm" :confirm-button-text="$t('login.login.56hmiq7w5g80')" :cancel-button-text="$t('login.login.56hmiq7xxec0')" />
    </van-popup>
</div>
    
</template>
<script>
import  list from '@/assets/json/code.json';
import vPinyin  from '@/assets/js/hanziToPinyin.js'
import  { loginPost } from '@/api/login'
import  {setToken} from '@/utils/auth'
import {  send } from '@/api/common'

export default {
    props:{
        type:{
            type:Number,
            dafault:null
        }
    },
    data() {
        return {
            showPicker:false,
            cities:[],
            form:{
                countryCode:"86",
                mobile:"",
                captcha:"",
                password:"",
                method :2
            },
            codeShow:true,
            index:0,
            lang:'',
            value:86, 
            searchCode:'86',
            psdShow:true,
            pachShow:true,
        }
    },
    mounted() {
            this.lang  = localStorage.getItem("lang")
            this.$nextTick(function() {
                list.forEach(element => {
                    element.lang = this.lang;
                });
                list.sort(function(a, b) {
                    var x, y;
                    x = vPinyin.chineseToPinYin(a[a.lang]).toLowerCase();
                    y = vPinyin.chineseToPinYin(b[a.lang]).toLowerCase();
                    if (x < y) {
                    return -1;
                    }
                    if (x > y) {
                    return 1;
                    }
                    return 0;
                });
                this.index = list.findIndex((item, index) => {
                    return item.code == this.value
                    // return (item.code == this.value?index:'') 
                })
                this.cities = list;
            });
    },
    methods: {
        showPickerChange(){
            this.showPicker = true,
            this.lang  = localStorage.getItem("lang")
            list.forEach(element => {
                element.lang = this.lang;
            });
            list.sort(function(a, b) {
                var x, y;
                x = vPinyin.chineseToPinYin(a[a.lang]).toLowerCase();
                y = vPinyin.chineseToPinYin(b[a.lang]).toLowerCase();
                if (x < y) {
                return -1;
                }
                if (x > y) {
                return 1;
                }
                return 0;
            });
            this.index = list.findIndex((item, index) => {
                return item.code == this.value
                // return (item.code == this.value?index:'') 
            })
            this.cities = list;
        },
        submit(){
             var reg = /^(?!(?:[0-9]+|[a-zA-Z]+|[-\/\\^$*+?.()|[\]{}]+)$)[!-~]{8,16}$/
            if(!this.form.mobile){
                this.$toast(this.$t('login.login.5636agny0i80'))
                return false;
            }
            if(!this.form.captcha && this.form.method==1){
                this.$toast(this.$t('login.login.5636agny4g80'))
                return false;
            }
            if(!this.form.password && this.form.method==2){
                this.$toast(this.$t('login.login.5636agny4t00'))
                return false;
            }else if(!reg.test(this.form.password)  && this.form.method==2){
                this.$toast(this.$t('login.login.5636agny52c0'))
                return false;
            }
            loginPost(Object.assign({},this.form,{countryCode : '+'+this.form.countryCode}) )
            .then(res=>{
                if(res.code==1){
                    setToken(res.data.token)
                    if(['1','5'].includes(String(res.data.open_status))){
                        this.$router.replace(res.data.redirect_url)
                    }else{
                        this.$router.replace({
                            path:'examine',
                        })
                    }
                }else{
                    this.$toast(res.msg);
                }
            })
        },
        pachShowClick(){
            this.pachShow = !this.pachShow;
            this.finish()
        },
        onConfirm(value) {
            this.form.countryCode =value.code;
            this.showPicker = false;
        },
        start() {
            this.$refs.countDown.start();
        },
        reset() {
            this.$refs.countDown.reset();
        },
        finish() {
            this.reset()
            this.codeShow=true;
        },
       codeChange(){
            if(!this.form.mobile){
                this.$toast(this.$t('login.login.5636agny0i80'))
                return false;
            }
            if(this.codeShow){
                var obj = {countryCode : '+'+this.form.countryCode ,  mobile :this.form.mobile  , event :"login" }
                send(obj)
                .then(res=>{
                     if(res.code==1){
                        this.codeShow=false;
                        this.start()
                    }
                })
            }
        },
        psdClick(e){
            console.log(e)
        },
        typeChange(){
            this.$emit("update:type",2)
            this.finish()
        },
        forgetClick(){
            this.finish()
            this.$emit("update:type",3)
        },
        searchInput(val){
            this.index = this.cities.findIndex((item, index) => {
                if(item.code == val){
                    // this.value = item.code;
                    // this.form.countryCode = item.code;
                    return item.code == val
                }
            })
        }
    },
    watch:{
        pachShow(val){
            if(val){
                this.form.method = 2
                this.form.captcha =''
            }else{
                this.form.method = 1
                this.form.password =''
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .register{
        li{
            border-bottom: 1px solid transparent;
            border-color: @borderColor;
            display:flex;
            font-size: 0.26rem;
            color: @sizeColor;
            padding-top: 0.5rem;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            vertical-align: middle;
            position: relative;
            .codePhone{
                width: 18%;
                margin-right: 0.2rem;
                padding-right: 0.21rem;
                background: url('~@/assets/img/xia.png') no-repeat center right;
                background-size: .21rem;
                line-height: 0.44rem;
                align-self: center;
                border-bottom: none;
            }
            .van-cell{
                color: @sizeColor;
                font-size: 0.26rem;
                padding-left: 0;
                padding-right: 0;
            }
            .codeChange,.van-count-down{
                color: @btnColor;
                
            }
        }
    }
    .pactList{
        font-size: .22rem;
        color: @sizeColor;
        line-height: .3rem;
        margin: .3rem 0;
        color: @btnColor;
        span{
            display: block;
            float: right;
        }
    }
    .typeShow{
        text-align: center;
         font-size: .22rem;
        color: @sizeColor;
        line-height: .3rem;
        padding-top: 0.6rem;
        span,a{
            color: @btnColor;
        }
    }
</style>